<template>
  <div class="common-layout">
    <el-form class="header" :model="queryParam" ref="queryRef" :inline="true">
      <el-form-item label="书名" prop="ipaddr">

        <el-select style="width: 100px" clearable v-model="queryParam.book" placeholder="书名">
          <el-option v-for="item in 7" :key="item" :label= "`${('book')}${item}`" :value= "`${('book')}${item}`" />
        </el-select>
      </el-form-item>

      <el-form-item label="单元名称" prop="ipaddr">
        <el-select style="width: 100px" clearable v-model="queryParam.unit" placeholder="单元名称">
          <el-option v-for="item in 6" :key="item" :label= "`${('unit')}${item}`" :value= "`${('unit')}${item}`" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchByUnit">确认</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <el-table
            v-loading="loading"
            :data="pageData"
            ref="mainTable"
            stripe
        >
          <el-table-column type="selection" width="40" align="center"/>
          <el-table-column label="编号" v-if="false" width="210" prop="_id"/>
          <el-table-column label="课程" width="80" align="center" prop="unit"/>
          <el-table-column label="排序" width="60" align="center" prop="number"/>
          <el-table-column label="词性" align="center" width="80" prop="type"/>
          <el-table-column label="中文名" width="180" align="center" prop="chinese"/>
        </el-table>
      </el-col>
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <template>
          <el-steps
              style="max-width: 600px"
              :space="200"
              :active="1"
              finish-status="success"
          >
            <el-step title="Done" />
            <el-step title="Processing" />
            <el-step title="Step 3" />
          </el-steps>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script setup >
import {ref} from "vue";
import {getPageUnit} from "@/api/word/index.js";
/**
 * 停止展示
 * */
let queryParam = ref({
  unit: '',
  book: ''
})
let pageData = ref([])
let loading = false

initPage()

function initPage(){
  queryParam.value.unit = 'unit' + Math.ceil(Math.random() * 5)
  queryParam.value.book = 'book' + Math.ceil(Math.random() * 6)
  handleQuery()
}

function resetQuery() {
  initPage()
}

function searchByUnit(){
  if(queryParam.value.unit === undefined){
    return
  }
  proxy.$modal.msg("查询的课程名称:" + queryParam.value.unit)
  handleQuery()
}

function handleQuery() {
  loading = true
  getPageUnit(queryParam.value).then((res) => {
    if (res.code === 200) {
      pageData.value = res.data
      total.value = res.data.length
      // console.log(res)
    }
  })
  loading = false
}
</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
